<template>
  <div class="home">
    <Loading v-if="!ready">loading...</Loading>
    <imooc-container
      v-else
      class="imooc-container"
      :options="{ width: 3840, height: 2160 }"
    >
      <div class="header">
        <Header />
      </div>
      <div class="wrapper"></div>
      <div class="center">
        <div class="left">
          <div class="left1">
            <total-Users
              :today-user="userData.userToday"
              :growth-last-day="+userData.userGrowthLastDay || 0"
              :growth-last-month="+userData.userGrowthLastMonth || 0"
              ref="totalUser"
            />
          </div>
          <div class="left2">
            <average-age
              :data="ageData"
              :avg-age="+userData.averageAge || 0"
              ref="averageAge"
            />
          </div>
          <div class="left3">
            <total-device :data="deviceData" />
          </div>
           <div class="left4">
            <total-Gender :data="userData.gender" />
          </div>
          <div class="left5">
            <line-chart :data="userData.rider" />
          </div>
           <div class="left6">
              <bar-chart :data="userData.category" />
          </div>
        </div>
        <div class="right"></div>
      </div>
    </imooc-container>
  </div>
</template>

<script >
import { defineComponent, getCurrentInstance, onMounted, ref, watch } from "vue";
import ImoocContainer from "@/components/Container/Container.vue"; // @ is an alias to /src
import Loading from "@/components/Loading/index.vue";
import Header from "@/components/Header/index.vue";
import TotalUsers from "@/components/TotalUsers/index";
import AverageAge from "@/components/AverageAge/index";
import TotalDevice from "@/components/TotalDevice/index";
import TotalGender from "@/components/TotalGender/index";
import LineChart from "@/components/LineChart/index";
import BarChart from '@/components/BarChart/index'
import { useScreenData } from "./useScreenData";
export default defineComponent({
  name: "Home",
  components: {
    ImoocContainer,
    Loading,
    Header,
    TotalUsers,
    AverageAge,
    TotalDevice,
    TotalGender,
    LineChart,
    BarChart
  },

  setup() {
    console.log(111)
    const state = ref(0)
    onMounted(()=>{
      debugger
      console.log('mounted')
      state.value+=1
    })
    watch(()=>state.value,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })

    const context = getCurrentInstance().ctx;
    const {
      ready,
      userData,
      ageData,
      deviceData,
      realTimeOrder,
      mapData,
    } = useScreenData(context, { once: false });
    return {
      ready,
      userData,
      ageData,
      deviceData,
      realTimeOrder,
      mapData,
    };
  },
  methods: {},
});
</script>
<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  background: #1d1d1d;
  color: #fff;
  .imooc-container {
    display: flex;
    flex-direction: column;
    .header {
      height: 167px;
    }
    .wrapper {
      width: 100%;
      height: 10px;
      background: rgb(92, 88, 89);
      filter: blur(0px);
      backdrop-filter: blur(0px);
    }
    .center {
      display: flex;
      .left {
        flex: 0 0 860px;
        display: flex;
        flex-direction: column;
        width: 860px;
        height: 100%;
        margin: 0 10px;
        box-sizing: border-box;
        background: #3c3d40;
        .left1,
        .left2,
        .left3,
        .left4,
        .left5,
        .left6 {
          padding-bottom: 20px;
        }

        .left1 {
          height: 300px;
        }

        .left2 {
          height: 320px;
        }

        .left3 {
          height: 280px;
        }

        .left4 {
          height: 230px;
        }

        .left5 {
          height: 360px;
        }

        .left6 {
          height: 360px;
        }
      }
    }
  }
}
</style>